<template>
  <div class="">
    <!-- <h2>人机校验</h2> -->
    <a-divider orientation="left">滑动拼图校验</a-divider>
    <slidingPuzzle />
    <a-divider orientation="left">滑动校验-纯前端</a-divider>
    <!-- 同时多个相同组件 会有类名冲突 要优化-->
    <!-- <sliding1 /> -->
    <sliding1 :slideWidth="400" :slideHeight="30" />

    <a-divider orientation="left">滑动校验2-可与后端联动</a-divider>
    <sliding2 />

    <!-- <a-divider orientation="left">旋转图片校验</a-divider>
    <slidingRotate /> -->
  </div>
</template>

<script setup>
import slidingPuzzle from './turings/slidingPuzzle.vue'
import sliding1 from './turings/sliding1.vue'
import sliding2 from './turings/sliding2.vue'
// import slidingRotate from './turings/slidingRotate.vue'
</script>

<style lang="less" scoped></style>
